<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>编辑地址</title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/address_add.css">
</head>

<body>
	<header>
		<a><img onclick="history.back()" class="arrow-left" src="./img/address/arrow.png" alt=""></a>
		<span class="title">编辑地址</span>
	</header>
	<form class="address_form">
		<div>
			<label>收货人：</label><input id="consignee" placeholder="请输入收货人姓名" pattern="/.+/" date-error="请输入收货人姓名"
				name="name" type="text">
		</div>
		<div>
			<label>手机号码：</label><input id="phone number" placeholder="请输入收货人手机号码"
				pattern="/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/"
				data-error="请输入合法的手机号码" name="tel" type="text">
		</div>
		<div>
			<label>所在地区：</label>
			<span class="selections">
				<select name="province_id" id="">
					<option></option>

				</select>
				<select name="city_id" id="">

				</select>
				<select name="county_id" id="">

				</select>
				<select name="town_id" id="">

				</select>
			</span>
		</div>
		<div>
			<label for="">详细地址：</label>
			<textarea spellcheck="false" pattern="/.+/" data-error="请输入门派、楼层等" placeholder="门牌、楼层等"
				name="street"></textarea>
		</div>
		<div>
			<label for="zip_code">邮政编码：</label><input id="zip_code" pattern="/^[1-9]\d{5}$/" data-error="请输入正确的邮政编码"
				placeholder="请输入邮政编码" name="code" type="text">
		</div>
		<div class="default"><label>默认地址：</label>
			<input class="select-box" type="checkbox" name="isDefault">
		</div>
		<button type="button" class="save-button">
			保存修改
		</button>
	</form>
	<script src="./js/axios.min.js"></script>
	<script src="./js/axios.config.js"></script>
	<script src="./js/utils.js"></script>
	<script>
		// 查找元素
		var oProvince = document.querySelector('select[name="province_id"]');
		var oCity = document.querySelector('select[name="city_id"]');
		var oCounty = document.querySelector('select[name="county_id"]');
		var oTown = document.querySelector('select[name="town_id"]');

		// 监听省，获取市
		oProvince.onchange = function (event, id, defaultValue) {
			// 判断id传参是否存在？不存在，pid = 选中的省份id
			var pid = id ? id : this.value;
			// 获取市
			axios.get('/pcct/city', { params: { id: pid } })
				.then(function (res) {
					if (res.status) {
						var html = '';
						res.data.forEach(function (item) {
							html += `<option value="${item.city_id}">${item.name}</option>`;
						});
						oCity.innerHTML = html;
						if (defaultValue) {
							oCity.value = defaultValue
						} else {
							// 触发市的change事件
							oCity.trigger('change');
						}
					}
				});
		};
		// 监听市，获取区
		oCity.onchange = function (event, id, defaultValue) {
			// 判断id传参是否存在？不存在，pid = 选中的市id
			var cid = id ? id : this.value;
			// 获取市
			axios.get('/pcct/county', { params: { id: cid } })
				.then(function (res) {
					if (res.status) {
						var html = '';
						res.data.forEach(function (item) {
							html += `<option value="${item.county_id}">${item.name}</option>`;
						});
						oCounty.innerHTML = html;
						if (defaultValue) {
							oCounty.value = defaultValue
						} else {
							// 触发市的change事件
							oCounty.trigger('change');
						}
					}
				});
		};
		// 监听区，获取街道
		oCounty.onchange = function (event, id, defaultValue) {
			// 判断id传参是否存在？不存在，pid = 选中的区id
			var cid = id ? id : this.value;
			// 获取市
			axios.get('/pcct/town', { params: { id: cid } })
				.then(function (res) {
					if (res.status) {
						var html = '';
						res.data.forEach(function (item) {
							html += `<option value="${item.town_id}">${item.name}</option>`;
						});
						oTown.innerHTML = html;
						if (defaultValue) {
							oTown.value = defaultValue
						}
					}
				});
		};
	</script>
	<script>
		// 查找元素
		var oName = document.querySelector('input[name="name"]');
		var oTel = document.querySelector('input[name="tel"]');
		var oStreet = document.querySelector('textarea[name="street"]');
		var oCode = document.querySelector('input[name="code"]');
		var oIsDefault = document.querySelector('input[name="isDefault"]');
		// 获取地址栏参数
		var id = params('id');
		axios.get('/pcct/province')
			.then(function (res) {
				if (res.status) {
					var html = '';
					res.data.forEach(function (item) {
						html += `<option value="${item.province_id}">${item.name}</option>`;
					});
					oProvince.innerHTML = html;
					// 获取地址详情
					axios.get('/address', { params: { id: id } })
						.then(function (res) {
							if (res.status) {
								// 还原表单
								oName.value = res.data.name;
								oTel.value = res.data.tel;
								oStreet.value = res.data.street;
								oCode.value = res.data.code;
								oIsDefault.defaultChecked = (res.data.isDefault === 1);
								// 获取省份

								// 还原省份
								oProvince.value = res.data.province_id;
								// 还原市
								oProvince.onchange(undefined, res.data.province_id, res.data.city_id);
								// 还原区
								oCity.onchange(undefined, res.data.city_id, res.data.county_id);
								// 还原县、街道
								oCounty.onchange(undefined, res.data.county_id, res.data.town_id);
							} else {
								alert(res.msg);
							}
						});
				}
			});

	</script>
	<script>
		//添加地址
		var oSaveButton = document.querySelector(".save-button");
		var oForm = document.querySelector('.address_form');
		oSaveButton.addEventListener('click', function () {
			//表单验证...（老师不会写，没讲）
			//批量获取表单元素的value
			var data = serialize(oForm);
			//fix默认地址
			data.isDefault = data.isDefault ? 1 : 0;
			//添加收货地址id
			data.id = id;
			//ajax
			axios.post('/address/edit', data)
				.then(function (res) {
					alert(res.msg);
					if (res.status) {

						location.replace('./address_list.html');

					}

				});





		})
	</script>
</body>

</html>